<template>
  <div id="container">
    <el-form id="signup-container" :model="signupForm" status-icon :rules="rules" ref="signupForm" label-width="20%">
      <el-form-item label="用户名" prop="username">
        <el-input
            type="text"
            v-model="signupForm.username"
            autocomplete="off"
            style="width: 80%;"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
            type="password"
            v-model="signupForm.password"
            autocomplete="off"
            style="width: 80%;"
            show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="signupForm.email" style="width: 80%;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="signup('signupForm')">注 册</el-button>
        <el-button @click="reset('signupForm')">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Signup",
  data() {
    var validateUsername = (rule, value, callback) => {
      let params = new URLSearchParams();
      params.append("username", value);
      this.$ajax.post(this.$server + "/user/getUserCount", params)
          .then(res => {
            if (res.data === 0) {
              callback();
            } else {
              callback(new Error('用户名已经存在'));
            }
          })
          .catch(error => {
            console.log("发生错误：" + error);
            callback();
          })
    };
    return {
      signupForm: {
        dialogFormVisible: false,
        username: "",
        password: "",
        email: ""
      },
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {pattern: /^[^0-9][a-zA-Z0-9_]{5,11}$/, message: "6-12位的字母/数字/下划线，不能以数字开头", trigger: ['blur', 'change']},
          {validator: validateUsername, trigger: 'blur'}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {
            pattern: /^(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,20}$/,
            message: "6-20位的字母/数字/符号两种及以上组合",
            trigger: ['blur', 'change']
          }
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {
            pattern: /^\w+(?:\.{0,1}[\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\.[a-zA-Z]+$/,
            message: "请输入正确的邮箱地址",
            trigger: ['blur', 'change']
          }
        ]
      }
    };
  },
  methods: {
    signup(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = new URLSearchParams();
          params.append("username", this.signupForm.username);
          params.append("password", this.signupForm.password);
          params.append("email", this.signupForm.email);
          this.$ajax
              .post(this.$server + "/user/signup", params)
              .then(res => {
                if (res.data === true) {
                  this.$message.success("注册成功");
                  this.close_signup();
                } else {
                  this.$message.error("注册失败");
                }
              })
              .catch(error => {
                console.log("发生错误：" + error);
              });
        } else {
          this.$message.info("请正确输入注册信息");
          return false;
        }
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
#container{
  display:flex;
  justify-content:center;
  height: 600px;
}
#signup-container {
  width: 400px;
  align-self:center;
}
</style>
